<template>
  <div>
    <div class="comment-wrapper">
      <div class="comment-header">
        <img class="avatar" :src="comment.headimg" alt="">
        <div class="info">
          <div class="nickname">{{comment.nickname}}</div>
          <div class="time">{{comment.created_at}}</div>
        </div>
      </div>
      <div class="comment-content">
        {{comment.content}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['comment'],
  data() {
    return {}
  },
  mounted() {
    this.comment.headimg = this.comment.headimg ? this.comment.headimg : "/static/img/default.png";
  }
}
</script>

<style lang="less" scoped>
  .comment-wrapper{
    padding: 5.556vw;
    border-bottom: 1px solid #eee;

    .comment-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2.778vw;

      .avatar{
        width: 9.722vw;
        height: 9.722vw;
        border-radius: 50%;
      }

      .info{
        flex: 1;
        margin-left: 2.778vw;
      }

      .time,.reply{
        font-size: 3.889vw;
        color: #999;
      }
    }

    .comment-content{
      margin-top: 2.778vw;
    }
  }
</style>